<template>
  <view>
	  <view class="search-box">
		  <my-search @click="gotoSaerch"></my-search>
	  </view>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <navigator class="swiper-item" :url="'/subpkg/good-detail/good-detail?good_id='+item.good_id">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>
	<!-- 分类导航区域 -->
	<view class="nav-list">
		<view class="nav-item" v-for="(item,index) in navList" key="index" @click="navClickHandler(item)">
			<img class="image" :src="item.image_src" >
		</view>
	</view>
	<!-- 楼层区域-->
	<view class="fool">
		<view class="fool-item" v-for="(item,index) in foolList" key="index">
			<!-- 楼层区域 -->
			<img :src="item.floor_title.image_src" class="floor-title">
				<view class="floor-img-box">
						  <!-- 左侧大图片的盒子 -->
						  <navigator class="left-img-box" :url="item.product_list[0].url" >
						    <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix" ></image>
						  </navigator>
						  <!-- 右侧 4 个小图片的盒子 -->
						  <view class="right-img-box">
						    <navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0" :url="item2.url">
						      <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
						    </navigator>
						  </view>
						</view>
					  </view>
					</view>
				  </view> 
</template>

<script>
	export default {
		data() {
			return {
				//轮播图
				swiperList:[],
				//导航图
				navList:[],
				//楼层数据
				foolList:[],
			};
		},
		onLoad(){
			this.getSwiperList(),
			this.getNavList(),
			this.getFloorList()
		},
		methods: {
					async getSwiperList(){ // 获取轮播图数据
						// 3.1发起请求
						 const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
						      // 3.2 请求失败
						      if (res.meta.status !== 200) return uni.$showMsg()
						      // 3.3 请求成功，为 data 中的数据赋值
						      this.swiperList = res.message
					},
					async getNavList(){ //  获取分类导航
						const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
						      if (res.meta.status !== 200) return uni.$showMsg()
						      this.navList = res.message
					}, 
					async getFloorList() { // 获取楼层导航
					      const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
					      if (res.meta.status !== 200) return uni.$showMsg()
							res.message.forEach(floor=>{
								floor.product_list.forEach(prod=>{
									prod.url='/subpkg/good_list/good_list?' + prod.navigator_url.split('?')[1]
								})
							})
								
							
					      this.foolList = res.message
					    },
						gotoSaerch(){
						uni.navigateTo({
						       url: '/subpkg/search/search'
						     })
						},
					navClickHandler(item) { // 点击跳转导航
					  // 判断点击的是哪个 nav
					  if (item.name === '分类') {
					    uni.switchTab({
					      url: '/pages/cate/cate'
					    })
					  }
					}
				}
	
		}
		
	 
	
</script>

<style lang="scss">
swiper{
	height:330rpx;
	swiper-item{
		image{
			width:100%
		}
	}
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .image {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor-title{
	height:60rpx;
	display:flex;
	justify-content:space-around
}
.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}
.search-box{
	position:sticky;
	top:0;
	z-index:999
}
</style>
